/* 学生搜索组件样式 */
.studentSearch {
  @apply w-full mb-4;
}

.searchCard {
  @apply shadow-sm;
}

.searchRow {
  @apply flex items-center gap-3;
}

.searchInput {
  @apply flex-1;
}

.expandIcon {
  @apply transition-transform duration-200 ml-1;
}

.expandIcon.expanded {
  @apply rotate-180;
}

.advancedCollapse {
  @apply mt-4;
}

.filterSection {
  @apply pt-4 border-t border-gray-100;
}

.filterItem {
  @apply space-y-1;
}

.filterLabel {
  @apply block text-sm font-medium text-gray-700;
}

.filterSelect {
  @apply w-full;
}

.filterTags {
  @apply flex items-center gap-2 mt-3 p-3 bg-blue-50 rounded-lg;
}

.filterTags .filterLabel {
  @apply text-sm font-medium text-gray-600 flex-shrink-0;
}

.filterTag {
  @apply inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-md;
}

/* 搜索输入框样式优化 */
.searchInput :global(.ant-input-affix-wrapper) {
  @apply transition-all duration-200;
}

.searchInput :global(.ant-input-affix-wrapper:focus-within) {
  @apply shadow-sm;
}

/* 高级筛选面板样式 */
.advancedCollapse :global(.ant-collapse-content-box) {
  @apply p-0;
}

.advancedCollapse :global(.ant-collapse-item) {
  @apply border-none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .searchRow {
    @apply flex-col items-stretch gap-2;
  }
  
  .searchInput {
    @apply w-full;
  }
  
  .filterSection {
    @apply pt-3;
  }
  
  .filterTags {
    @apply flex-col items-start gap-2 p-2;
  }
  
  .filterTags .filterLabel {
    @apply mb-1;
  }
}

@media (max-width: 480px) {
  .filterSection :global(.ant-col) {
    @apply mb-2;
  }
  
  .filterTag {
    @apply text-xs px-1.5 py-0.5;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .searchCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .filterSection {
    @apply border-gray-700;
  }
  
  .filterLabel {
    @apply text-gray-300;
  }
  
  .filterTags {
    @apply bg-gray-800 border border-gray-700;
  }
  
  .filterTags .filterLabel {
    @apply text-gray-400;
  }
  
  .filterTag {
    @apply bg-blue-900 text-blue-200;
  }
  
  .searchInput :global(.ant-input) {
    @apply bg-gray-700 border-gray-600 text-gray-100;
  }
  
  .searchInput :global(.ant-input:focus) {
    @apply border-blue-500;
  }
  
  .filterSelect :global(.ant-select-selector) {
    @apply bg-gray-700 border-gray-600;
  }
  
  .filterSelect :global(.ant-select-selection-item) {
    @apply text-gray-100;
  }
}